<template>
  <!-- 系统参数配置 -->
  <div v-loading="loading" element-loading-text="拼命加载中">
    <el-row>
      <!-- 搜索框 -->
      <el-col :span="24">
        <div class="search-wrapper">
          <ul class="search-box">
            <li><span class="filter-name">用户账户：</span>
              <el-input placeholder="用户账户" style="width:150px" v-model="listQuery.loginName" clearable></el-input></li>
            <li><span class="filter-name">用户姓名：</span>
              <el-input placeholder="用户姓名" style="width:150px" v-model="listQuery.userName" clearable></el-input></li>
            <li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="getList">查询</el-button></li>
          </ul>
        </div>
      </el-col>
      <!-- 按钮区 -->
      <el-col :span="24">
        <div class="button-wrapper">
        </div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
      <el-col :span="24">
        <div class="data-wrapper">
          <template v-if="tableData!=null">
            <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%">
              <el-table-column type="index" label="序号" :index="indexMethod">
              </el-table-column>
              <el-table-column prop="loginTime" label="登录时间" >
              </el-table-column>
              <el-table-column prop="loginName" label="用户账户">
              </el-table-column>
              <el-table-column prop="userName" label="用户姓名">
              </el-table-column>
              <el-table-column prop="phone" label="联系方式">
              </el-table-column>
              <el-table-column prop="type" label="登录类型">
              </el-table-column>
              <el-table-column prop="ip" label="登录IP">
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-col>
    </el-row>
    <!-- 底部按钮和分页 -->
    <el-row :gutter="20" v-if="dataCount" type="flex" justify="space-between" align="center" class="page-wrapper">
      <el-col :span="24">
        <div class="page-item">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="listQuery.currentPage"
                         :page-sizes="pageSizes"
                         :page-size="listQuery.pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="dataCount"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
    export default {
        data(){
            return {
                tableData:[],
                loading:false,
                dialogFormVisible:false,
                dialogFormVisible1:false,
                formLabelWidth:'120px',
                //默认数据总数
                dataCount:0,
                pageSizes:[5, 10, 20, 30, 40],
                //查询条件
                listQuery: {
                    currentPage:1,
                    pageSize:5
                },
            }
        },
        created() {
            this.getList()
        },
        methods:{
            getList() {
                this.loading=true;
                this.getRequest('/api/loginLogss',this.listQuery).then((res)=>{
                    if(res.data.status == 200){
                        this.tableData=res.data.data
                        this.dataCount=res.data.count;
                        this.loading = false
                    }else{
                        this.$message.error(res.data.msg)
                    }

                }).catch((error)=>{
                        this.$message.error(error)
                    })
            },
            indexMethod(index) {
                return (index+1)+(this.listQuery.currentPage-1)*this.listQuery.pageSize;
            },
            handleSizeChange(size) {
                this.listQuery.pageSize=size;
                this.listQuery.currentPage=1;
                this.getList()
            },
            handleCurrentChange(currentPage) {
                this.listQuery.currentPage=currentPage;
                this.getList()
            },
        },
        mounted(){},
        updated(){},
        destroyed(){},
    }
</script>
<style scoped>

</style>